<template>
  <d2-container>
  <div class="app-container">
    <el-container :style="'height:'+containerHeight+'px'+';'">
      <el-aside class="tree-area" @contextmenu.prevent.native="showMenu('',$event)" v-if="showdetailflag==1">
        <el-input style="margin: 5px 0px 10px 5px;padding-right: 8px"
          placeholder="线路搜索"
          v-model="filterText">
          <i slot="suffix"  class="el-icon-search el-input__icon" ></i>
        </el-input>
        <el-tree
          :style="'height:'+containerHeight+'px'+''"
          highlight-current
          node-key="buildingId"
          ref="buildTree"
          :data="dataList"
          :props="menuListTreeProps"
          @node-click="selectBuild"
          default-expand-all
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
        ></el-tree>
      </el-aside>
      <el-main style="padding: 0px;width: 100%">
        <div class="" :style="'margin-top: 20px;width:'+siderbarwidth" v-if="showdetailflag==1">
          <!--<div class="device-btn-box">-->
            <!--<div class="radio-box">-->
                                            <!--&lt;!&ndash;<a href="#"  :class="{'isccheck':tablechoose==='1','isblack':tablechoose=='2'}" @click="choosetab('1')">列表</a> |&ndash;&gt;-->
                                            <!--&lt;!&ndash;<a href="#"  :class="{'isccheck':tablechoose==='2','isblack':tablechoose=='1'}" @click="choosetab('2')">表格</a>&ndash;&gt;-->

              <!--<el-select v-model="dataForm.energyType"  style="width: 100px;" placeholder="请选择"  size="mini" @change="getTableDataList">-->
                <!--<el-option-->
                  <!--v-for="(item) in meterTypeList" :key="item.paramKey"-->
                  <!--:label="item.paramValue"-->
                  <!--:value="item.paramKey">-->
                <!--</el-option>-->
              <!--</el-select>-->
            <!--</div>-->
          <!--</div>-->

          <div class="device-list">
            <div v-for="(param,v) in tabledataList" :key="v" class="device-item" style="height:100%;background-color: #238;color: white;width: 280px;display: inline-block;margin-left: 10px" v-if="tablechoose==='1'">
                                            <span class="device-title" style="margin: 10px;border-bottom: 1px solid black;"><span>{{param[0].meterName}}</span></span>
                                            <div class="device-state" style="height:100%;margin-bottom: 10px;">
                                              <el-row>
                                                <el-col :span="6" style="text-align: right">
                                                  <div style="padding-left: 15px;padding-top:10px;"><img :src="require('../../assets/pdu/pdu.png')" style="width: 40px;height:100px;text-align: center"  /></div>
                                                </el-col>
                                                <el-col :span="18" style="text-align: center">
                                                <el-row :gutter="24" style="margin-top: 5px;verticle-align:middle"  v-for="(vlist,key) in param" :key="key"  v-if="vlist.collectType ==='110006' || vlist.collectType ==='110007'|| vlist.collectType ==='110008'|| vlist.collectType ==='110009'|| vlist.collectType ==='110010' ">
                                                  <el-col :span="24" style="text-align: center">
                                                    <div style="margin-left:20px;text-align: left">{{getcollectTypeName( vlist.collectType)}}: {{vlist.oval}} {{getcollectTypeUnit( vlist.collectType)}}</div>
                                                  </el-col>

                                                </el-row>
                                                </el-col>
                                              </el-row>
                                              <el-row :gutter="24" style="padding-top: 10px">
                                                <el-col :span="24" style="text-align: center">
                                                  <span style="text-align: center;padding-top: 10px">{{param[0].rtime}}</span>
                                                </el-col>
                                              </el-row>
                                            </div>
              <button style="background-color: #2c89de;width:135px;color: white;margin:0px 30px 10px;border-color:#2c89de" @click="showdetail(param)">详情</button>
            </div>


            <el-table v-if="tablechoose==='2'"
              :data="tabledataList"
              border
              :height="containerHeight"
              v-loading="dataListLoading"
              @selection-change="selectionChangeHandle"
              style="width: 100%;margin-top:15px;">
              <el-table-column
                type="selection"
                header-align="center"
                align="center"
                width="50">
              </el-table-column>
              <el-table-column
                prop="meterCode"
                header-align="center"
                align="center"
                label="计量器编号">
              </el-table-column>
              <el-table-column
                prop="meterName"
                header-align="center"
                align="center"
                label="计量器名称">
              </el-table-column>
              <el-table-column
                prop="collectType"
                header-align="center"
                align="center"
                label="采集类型">
                <template slot-scope="scope">
                  {{scope.row.collectType |collectTypeName(collectTypeList)}}
                </template>
              </el-table-column>

              <el-table-column
                prop="ctime"
                header-align="center"
                align="center"
                label="采集时间">
              </el-table-column>
              <el-table-column
                prop="oval"
                header-align="center"
                align="center"
                label="原始值">
                <template slot-scope="scope">
                  {{scope.row.oval }} ({{scope.row.collectType |collectTypeUtilName(collectTypeList)}})
                </template>
              </el-table-column>
            </el-table>
            <el-pagination  v-if="tablechoose==='2'"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="totalPage"
              layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>

          </div>
        </div>

        <div class="" :style="'margin-top: 20px;width:'+siderbarwidth" v-if="showdetailflag==2">
          <el-row>
            <button style="background-color:rgb(25 46 87);width:70px;color: white;margin:0px 30px 10px;padding:10px 0px;border-color:rgb(25 46 87)" @click="back()"><i class="el-icon-back"></i> 返回</button>
          </el-row>
          <el-row>
            <el-row>
              <el-col :span="6" style="text-align: center">
                <div style="padding-left: 15px;padding-top:10px;"><img :src="require('../../assets/pdu/pdu.png')" style="width: 80px;height:200px;text-align: center"  /></div>
              </el-col>
              <el-col :span="9" style="text-align: center">
                <el-row :gutter="24" style="margin-top: 20px;verticle-align:middle">
                  <el-col :span="24" style="text-align: center">
                    <div style="margin-left:20px;text-align: left;color: white;">设备名称: {{meterInfo.meterName}}</div>
                  </el-col>
                </el-row>
                <el-row :gutter="24" style="margin-top: 20px;verticle-align:middle">
                  <el-col :span="24" style="text-align: center">
                    <div style="margin-left:20px;text-align: left;color: white;">设备状态: {{ meterInfo[110011] == '1' ? '在线' : '离线'}}</div>
                  </el-col>
                </el-row>
                <el-row :gutter="24" style="margin-top: 20px;verticle-align:middle">
                  <el-col :span="24" style="text-align: center">
                    <div style="margin-left:20px;text-align: left;color: white;">电流上限: {{meterInfo[110012]}} {{getcollectTypeUnit("110012")}}</div>
                  </el-col>
                </el-row>
                <el-row :gutter="24" style="margin-top: 20px;verticle-align:middle">
                  <el-col :span="24" style="text-align: center">
                    <div style="margin-left:20px;text-align: left;color: white;">电流下限: {{meterInfo[110013]}} {{getcollectTypeUnit("110013")}}</div>
                  </el-col>
                </el-row>
                <el-row :gutter="24" style="margin-top: 20px;verticle-align:middle">
                  <el-col :span="24" style="text-align: center">
                    <div style="margin-left:20px;text-align: left;color: white;">电压上限: {{meterInfo[110014]}} {{getcollectTypeUnit("110014")}}</div>
                  </el-col>
                </el-row>
                <el-row :gutter="24" style="margin-top: 20px;verticle-align:middle">
                  <el-col :span="24" style="text-align: center">
                    <div style="margin-left:20px;text-align: left;color: white;">电压下限: {{meterInfo[110015]}}{{getcollectTypeUnit("110015")}}</div>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="9" style="text-align: center">
                <el-row :gutter="24" style="margin-top: 20px;verticle-align:middle">
                  <el-col :span="24" style="text-align: center">
                    <div style="margin-left:20px;text-align: left;color: white;">SI-1状态: {{meterInfo[110016]}} {{getcollectTypeUnit("110016")}}</div>
                  </el-col>
                </el-row>
                <el-row :gutter="24" style="margin-top: 20px;verticle-align:middle">
                  <el-col :span="24" style="text-align: center">
                    <div style="margin-left:20px;text-align: left;color: white;">SI-2状态: {{meterInfo[110017]}} {{getcollectTypeUnit("110017")}}</div>
                  </el-col>
                </el-row>
                <el-row :gutter="24" style="margin-top: 20px;verticle-align:middle">
                  <el-col :span="24" style="text-align: center">
                    <div style="margin-left:20px;text-align: left;color: white;">SI-3状态: {{meterInfo[110018]}} {{getcollectTypeUnit("110018")}}</div>
                  </el-col>
                </el-row>
                <el-row :gutter="24" style="margin-top: 20px;verticle-align:middle">
                  <el-col :span="24" style="text-align: center">
                    <div style="margin-left:20px;text-align: left;color: white;">SI-4状态: {{meterInfo[110019]}}{{getcollectTypeUnit("110019")}}</div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-row>
          <div style="background-color:rgb(25 46 87);height: 10px;width: 105%;margin-top: 10px"></div>
          <div style="color: white;margin-top: 10px;margin-left: 10px;display: inline-block"><span> 实时数据  {{meterInfo["rtime"]}}</span></div>
            <button style="float: right;background-color:rgb(25 46 87);width:70px;color: white;margin-top:5px;padding:5px 0px;border-color:rgb(25 46 87)" @click="chazuodetail()">更多</button>
          <el-row>
            <el-col :span="24" style="text-align: center">
              <el-row :gutter="24" style="margin-top: 5px;verticle-align:middle">
                <el-col :span="5" style="text-align: center;margin-left: 15px">
                  <div style="background-color:#173e6e;color: #6db1ee;text-align: center;padding: 20%">
                    <div style="">{{meterInfo[110006]||'-'}} {{getcollectTypeUnit("110006")}}</div>
                    <div style="">输入电流</div>
                  </div>
                </el-col>
                <el-col :span="5" style="text-align: center;margin-left: 15px">
                  <div style="background-color:#173e6e;color: #6db1ee;text-align: center;padding: 20%">
                    <div style="">{{meterInfo[110007]||'-'}} {{getcollectTypeUnit("110007")}}</div>
                    <div style="">输入电压</div>
                  </div>
                </el-col>
                <el-col :span="5" style="text-align: center;margin-left: 15px">
                  <div style="background-color:#173e6e;color: #6db1ee;text-align: center;padding: 20%">
                    <div style="">{{meterInfo[110008]||'-'}} {{getcollectTypeUnit("110008")}}</div>
                    <div style="">输入功率</div>
                  </div>
                </el-col>
                <el-col :span="5" style="text-align: center;margin-left: 15px">
                  <div style="background-color:#173e6e;color: #6db1ee;text-align: center;padding: 20%">
                    <div style="">{{meterInfo[110009]||'-'}} {{getcollectTypeUnit("110009")}}</div>
                    <div style="">功率因素</div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="24" style="margin-top: 15px;verticle-align:middle">
                <el-col :span="5" style="text-align: center;margin-left: 15px">
                  <div style="background-color:#173e6e;color: #6db1ee;text-align: center;padding: 20%">
                    <div style="">{{meterInfo[110010]||'-'}} {{getcollectTypeUnit("110010")}}</div>
                    <div style="">电能累计</div>
                  </div>
                </el-col>
                <el-col :span="5" style="text-align: center;margin-left: 15px">
                  <div style="background-color:#173e6e;color: #6db1ee;text-align: center;padding: 20%">
                    <div style="">{{meterInfo[110004]||'-'}} {{getcollectTypeUnit("110004")}}</div>
                    <div style="">温度</div>
                  </div>
                </el-col>
                <el-col :span="5" style="text-align: center;margin-left: 15px">
                  <div style="background-color:#173e6e;color: #6db1ee;text-align: center;padding: 20%">
                    <div style="">{{meterInfo[110005]||'-'}} {{getcollectTypeUnit("110005")}}</div>
                    <div style="">湿度</div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>


        </div>
      </el-main>
    </el-container>
    <el-dialog
      title="插座状态"
      :visible.sync="menuVisibledialog"
      width="50%"
      style="overflow:hidden"
    >
      <el-table
        :data="chazuodataList"
        border
        :height="containerHeight"
        v-loading="dataListLoading"
        style="width: 100%;margin-top:15px;">
        <el-table-column
          type="index"
          header-align="center"
          label="编号"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="meterName"
          header-align="center"
          align="center"
          label="插座名称">
        </el-table-column>
        <el-table-column
          prop="110011"
          header-align="center"
          align="center"
          label="开关状态">
          <template slot-scope="scope">
           {{ scope.row[110011] == '1' ? '在线' : '离线'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="110100"
          header-align="center"
          align="center"
          label="电流(A)">
        </el-table-column>
        <el-table-column
          prop="110101"
          header-align="center"
          align="center"
          label="功率(w)">
        </el-table-column>
        <el-table-column
          prop="110102"
          header-align="center"
          align="center"
          label="负载下限(A)">
        </el-table-column>
        <el-table-column
          prop="110103"
          header-align="center"
          align="center"
          label="负载上限(A)">
        </el-table-column>
        <!--<el-table-column-->
          <!--header-align="center"-->
          <!--align="center"-->
          <!--width="150"-->
          <!--label="操作">-->
          <!--<template slot-scope="scope">-->
            <!--<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>-->
            <!--<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>-->
          <!--</template>-->
        <!--</el-table-column>-->
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="menuVisibledialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
  </d2-container>
</template>

<script>
  import {treeDataTranslate} from "@/utils";
  import * as Util from "@/utils";
  import util from '@/libs/util.js'
  export default {
    data() {
      return {
        currentPduMeterCode:'',
        chazuodataList: [],
        meterInfo:{},
        showdetailflag:1,
        filterText: '',
        collectTypeList:[],
        tablechoose: '1',
        wsUrl: '',
        websocket: null,
        actions: [{"name": '合闸', value: '0001'}, {"name": '拉闸', value: '0002'}],
        weekname: [{"name": '周日', value: '1'}, {"name": '周一', value: '2'}, {"name": '周二', value: '3'}, {
          "name": '周三',
          value: '4'
        }, {"name": '周四', value: '5'}, {"name": '周五', value: '6'},
          {"name": '周六', value: '7'}],
        oc: true,
        wendu: 26,
        allCheck: false,
        showType: "0",
        siderbarwidth: '95%',
        updateMenuNode: '',
        dataForm:{
          energyType:'11',//pdu
          meterCodeName:'',
          meterCode:'',
          deviceName: ''
        },
        operType: '',
        oldobj: {},
        form: {
          workmodel: "",
          windstatu: "",
          doorstat: "",
          keylock: "",
          temperature: ""
        },
        dataFormBuild: {
          buildingId: "",
          buildingName: "",
          parentBuildingId: "-1",
          buildingType: "",
          buildingArea: "",
          buildingPersons: "",
          projectId: "",
          parentBuildingName: ""
        },
        showInfo: true,
        treeHeight: 200,
        containerHeight: 300,
        menuVisible: false,
        dataLoading: false,
        opmenuTitle: "模式设置",
        menuVisibledialog: false,
        dataList: [],
        tabledataList: [],
        meterdataList: [],
        sourceMeterdataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        addOrUpdateVisiblemeter: false,
        buildTypeList: [],
        projectList: [],
        menuListTreeProps: {
          label: "buildingName",
          children: "children"
        },
        currentNode: "",
        meterTypeList: [],
        subitemTypeList: [],
        subitemValueList: [],
        meterInfoList: [],
        currentbuildInfo: {},
        dataRule: {
          buildingName: [
            {required: true, message: "区域名称不能为空", trigger: "blur"}
          ],
          parentBuildingId: [
            {required: true, message: "所属区域不能为空", trigger: "blur"}
          ],
          buildingType: [
            {required: true, message: "区域类型不能为空", trigger: "blur"}
          ],
          buildingArea: [
            {required: true, message: "区域面积不能为空", trigger: "blur"}
          ],
          buildingPersons: [
            {required: true, message: "容纳人数不能为空", trigger: "blur"}
          ],
          projectId: [
            {required: true, message: "项目编号不能为空", trigger: "blur"}
          ]
        },
        viewVisile: false,
        viewData: {},
        meterCode: "",
        timedataListSelections: [],
        timeForm: {
          bid: '',
          title: '开关时间列表',
          show: false,
          dataList: [],
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0,
        },
        currentMeterNode: {},
        collectTypeValue: {
          '50002': { //开关机状态
            '0': '关机',
            '1': '开机'
          },
          '50004': { //工作模式
            '0': '空',
            '1': '自动',
            '2': '辅助加热',
            '3': '除湿',
            '4': '制热',
            '5': '制冷',
            '6': '通风',
            '7': '单地暖制热',
            '8': '地暖盘管同时'
          },
          '50005': { //风机状态
            '0': '停止',
            '1': '低速',
            '2': '中速',
            '3': '高速',
            '4': '自动',
            '5': '自动低速',
            '6': '自动中速',
            '7': '自动高速'
          },
          '50006': { //阀状态
            '0': '关阀',
            '1': '开阀'
          },
          '50007': { //键盘锁
            '0': '开锁',
            '1': '锁定',
            '2': '高级锁定'
          }
        }
      };
    },
    components: {
    },
    watch: {
      filterText(val) {
        this.$refs.buildTree.filter(val);
      }
    },
    filters: {
      collectTypeName: function (value,statusList) {
        for(let i=0;i<statusList.length;i++){
          if(statusList[i].collectType===value){
            return statusList[i].collectName;
          }
        }
      },
      collectTypeUtilName: function (value,statusList) {
        for(let i=0;i<statusList.length;i++){
          if(statusList[i].collectType===value){
            return statusList[i].collectUnit;
          }
        }
      },
      colectName: function (value,statusList) {
        for(let i=0;i<statusList.length;i++){
          if(statusList[i].equiCode===value){
            return statusList[i].equiName+'['+statusList[i].equiCode+']';
          }
        }
      },

      actionName: function (value, statusList) {
        for (let i = 0; i < statusList.length; i++) {
          if (statusList[i].value === value) {
            return statusList[i].name;
          }
        }
      },
      // collectTypeNames: function(value,type) {
      //   return this.collectTypeValue[type][value]
      // },
      buildTypeName: function (value, statusList) {
        for (let i = 0; i < statusList.length; i++) {
          if (statusList[i].paramKey === value) {
            return statusList[i].paramValue;
          }
        }
      },
      projectName: function (value, statusList) {
        for (let i = 0; i < statusList.length; i++) {
          if (statusList[i].projectId === value) {
            return (
              statusList[i].projectName + "[" + statusList[i].projectId + "]"
            );
          }
        }
      },
      statusName: function (value, statusList) {
        for (let i = 0; i < statusList.length; i++) {
          if (statusList[i].value === value) {
            return statusList[i].label;
          }
        }
      },
      meterTypeName: function (value, statusList) {
        for (let i = 0; i < statusList.length; i++) {
          if (statusList[i].paramKey === value) {
            return statusList[i].paramValue;
          }
        }
      },
      materName: function (value, statusList) {
        for (let i = 0; i < statusList.length; i++) {
          if (statusList[i].meterCode === value) {
            return statusList[i].meterCode + "[" + statusList[i].meterAddr + "]";
          }
        }
      }
    },
    created() {
      this.queryCollectType()
      this.setContentHeight();
      this.queryStatic("METER_TYPE");
      // this.getProjectDataList();
      this.getDataList();
    },
    computed: {
      tableHeight() {
        return Util.getClientHeight() - 410;
      }
    },
    methods: {
      chazuodetail(){
        this.menuVisibledialog = true
        let params = {
          'meterCode': this.currentPduMeterCode,
          "customerId":util.cookies.get('customer_id'),
        }
        this.$api.chazuodata(params).then((data) => {
          if (data&&data.code==0) {
          this.chazuodataList = data.data
        } else {
          this.chazuodataList = []
        }
      });


      },
      showdetail(param){
        this.currentPduMeterCode = param[0].meterCode
        this.showdetailflag = 2
        this.meterInfo = {}
        this.meterInfo["meterName"] = param[0].meterName
        this.meterInfo["rtime"] = param[0].rtime
        param.forEach(e=>{
          console.log(e)
          this.meterInfo[e.collectType] = e.oval
        })
      },
      back(){
        this.showdetailflag = 1
      },


      filterNode(value, data) {
        if (!value) return true;
        return data.buildingName.indexOf(value) !== -1;
      },
      getcollectTypeName(type){
        for(let i=0;i<this.collectTypeList.length;i++){
          if(this.collectTypeList[i].collectType===type){
            return this.collectTypeList[i].collectName;
          }
        }
        return ''
      },
      getcollectTypeUnit(type){

        for(let i=0;i<this.collectTypeList.length;i++){
          if(this.collectTypeList[i].collectType===type){
            return this.collectTypeList[i].collectUnit;
          }
        }
        return ''
      },

      // getimg(collectType){
      //   if(collectType==='100003'){
      //     return '../../../assets/iconfont/100003.png';
      //   }
      //
      // },


      /**
       * 获取采集分项
       */
      async queryCollectType() {
        let params = {
          'state': '1' ,
          "customerId":util.cookies.get('customer_id'),
          'page': 1,
          'limit': 10000,
        }
        const data = await  this.$api.getEcscollectitem(params)
          if (data && data.code === 0) {
          this.collectTypeList = data.page.list
        } else {
          this.collectTypeList = []
        }
      },
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 获取数据列表
      getTableDataList () {
        // this.tabledataList = {"123":[{"collectType":'20','meterName':'1000001',"oval":"10 Kw"},{"collectType":'20','meterName':'1000001',"oval":"10 Kw"}],
        //   "345":[{"collectType":'20','meterName':'1000002',"oval":"10 Kw"},{"collectType":'20','meterName':'1000001',"oval":"10 Kw"}]}

        if(this.dataForm.energyType==''){
          this.dataForm.energyType = this.meterTypeList[0].paramKey
        }

        this.$api.intimegroupBymeter({
            'page': 1,
            'limit': 100000,
            'buildingId':this.currentbuildInfo.buildingId,
            'meterType':this.dataForm.energyType,
            // 'meterCode': this.dataForm.meterCode ,
            'projectId':util.cookies.get("cuuren_projectId"),
            "customerId":util.cookies.get('customer_id')
          }).then((data) => {
          if (data&&data.code==0) {
          this.tabledataList = data.data
       //   this.totalPage = data.data.totalCount
        } else {
          this.tabledataList = {}
          this.totalPage = 0
        }
      })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getTableDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getTableDataList()
      },
      choosetab(val){
        this.tablechoose = val
        if(val==='1'){
          this.getmeterDataList();
        }else{
          this.getTableDataList()
        }
      },

      collectTypeNames(value, type) {
        return this.collectTypeValue[type][value]
      },
      showMenu(item, event) {
        // debugger
        // parameter.preventDefault()
        // var x = parameter.clientX
        // var y = parameter.clientY
        this.rightClick(event, item, '1')

      },

      closeViewVisible() {
        this.viewVisile = false;
      },
      getMeterDataList() {
        this.$api.ecsmeterinfolist({
            page: 1,
            limit: 10000000,
            customerId: util.cookies.get("customer_id")
        }).then((data) => {
          if(data && data.code === 0
      )
        {
          this.meterInfoList = data.page.list;
        }
      else
        {
          this.meterInfoList = [];
        }
      })
        ;
      },
      /**
       * 获取浏览器高度
       */
      getClientHeight() {
        let height = 0;
        if (window.innerHeight) {
          height = window.innerHeight;
        }
        if (document.body && document.body.clientHeight) {
          height = document.body.clientHeight;
        }
        if (
          document.documentElement &&
          document.documentElement.clientHeight &&
          document.documentElement.clientWidth
        ) {
          height = document.documentElement.clientHeight;
        }
        return height;
      },
      setContentHeight() {
        let height = this.getClientHeight();
        this.containerHeight = height - 145;
        this.treeHeight = height - 105;
      },
      // 鼠标右击，通过右键弹出菜单操作节点
      rightClick(event, object, flag) {
        console.log(22222)
        this.updateMenuNode = object;
        // if (this.objectID !== object.id) {
        //   this.menuVisible = false
        // } else {
        this.menuVisible = true;
        // }
        document.addEventListener("click", e => {
          this.menuVisible = false;
      })
        ;
        let menu = document.querySelector("#rightClickMenu");
        // 菜单位置基于鼠标点击位置
        menu.style.left = event.clientX + "px";
        menu.style.top = event.clientY + "px";
        menu.style.position = "fixed";
        menu.style.width = "auto";
        menu.style.width = "auto";
        menu.style["z-index"] = "100";
      },
      selectBuild(data, node) {
        this.currentbuildInfo = data;
        this.currentNode = node;
      //  this.getmeterDataList();
        this.getTableDataList();
        this.showType = '0'
      },
      getProjectDataList() {
        this.$api.ecsprojectinfolist({
            page: 1,
            limit: 10000000,
            customerId: util.cookies.get("customer_id")
        }).then((data) => {
          if(data && data.code === 0
      )
        {
          this.projectList = data.page.list;
        }
      else
        {
          this.projectList = [];
        }
      })
        ;
      },
      /**
       * 获取参数枚举
       */
      queryStatic(type) {
        this.$api.sysstaticdatagetList({
            code: type,
            customerId: util.cookies.get("customer_id")
        }).then(data => {
          if(data && data.code === 0
      )
        {
          if (type === "meterType") {
            this.meterTypeList = data.page;
          } else if (type === "subitemType") {
            this.subitemTypeList = data.page;
          } else if (type === "subitemValue") {
            this.subitemValueList = data.page;
          } else if (type === "buildingType") {
            this.buildTypeList = data.page;
          }
        }
      })
        ;
      },
      // 获取数据列表
      async getDataList(type) {
        if (type) {
          this.pageIndex = 1
        }
        const res = await this.$api.ecsbuildinginfoselect({
            page: this.pageIndex,
            limit: this.pageSize,
            key: this.dataForm.key,
            customerId: util.cookies.get("customer_id"),
            'projectid': util.cookies.get("cuuren_projectId")
        })
        let data = res
          if(data && data.code === 0)
        {

          this.dataList = treeDataTranslate(
            data.menuList,
            "buildingId",
            "parentBuildingId"
          );
          this.currentbuildInfo = this.dataList[0];
          this.currentNode = this.dataList[0];

          this.$nextTick(() => {
            this.$refs.buildTree.setCurrentKey(this.currentbuildInfo.buildingId);
        })
          if(this.tablechoose==='1'){
            this.getTableDataList();
          }else{
            this.getTableDataList()
          }
        }
      else
        {
          this.dataList = [];
        }
      },
      // 获取关联计量器数据列表
      getmeterDataList(flag) {
        if (!this.currentNode || this.currentNode === "") {
          this.$message({
            message: "请先选择区域",
            type: "warning"
          });
          return;
        }

        if (flag) {
          this.pageIndex = 1
        }
        this.dataListLoading = true;
      //   this.$api.okhttp({
      //     url: this.$http.adornUrl("/temp/list"),
      //     method: "get",
      //     params: this.$http.adornParams({
      //       page: this.pageIndex,
      //       limit: this.pageSize,
      //       meterType: this.$meterType.TEMP_CTRL_DEVICE,
      //       buildingId: this.currentbuildInfo.buildingId,
      //       deviceName: this.dataForm.deviceName,
      //       meterCode: this.dataForm.meterCode,
      //       customerId: this.$util.cookies.get("customer_id")
      //     })
      //   }).then((data) => {
      //     if(data && data.code === 0)
      //   {
      //     this.meterdataList = data.data;
      //     this.sourceMeterdataList = data.data;
      //     //this.totalPage = data.page.totalCount;
      //     ;
      //   }
      // else
      //   {
      //     this.sourceMeterdataList = [];
      //     this.meterdataList = [];
      //    // this.totalPage = 0;
      //   }
      //   this.dataListLoading = false;
      // })
      //   ;
      },
    },
    // beforeRouteLeave(to, from, next) {
    //   if (this.websocket) {
    //     // console.log("webSocketServer close");
    //     // this.websocket.close()
    //     next()
    //   }
    // }
  }
  ;
</script>
<style scoped="scoped">
  /deep/  .circle {
    width: 20px;
    height: 20px;
    background-color: #d6dddf;
    border: 1.5px solid;
    border-color: #BFC3C0;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
  }

  /deep/  .button:before {
    content: "";
    width: 8px;
    height: 8px;
    display: block;
    z-index: -1;
    position: relative;
    background: #ddd;
    /*left: -15px;*/
    /*top: -15px;*/
    border-radius: 65px;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
  }

  /deep/  .button:after, .button2:after {
    content: "";
    color: #09F;
    font-size: 20px;
    width: 100%;
    height: 100%;
    line-height: 8px;
    text-align: center;
    position: absolute;
    top: 0;
    display: block;
  }

  /deep/  .button, .button2 {
    /*float: left;*/
    margin: 5px 5px 0px 0px;
    cursor: pointer;
    height: 18px;
    width: 18px;
    display: block;
    /*position: relative;*/
    color: black;
    text-align: center;
    line-height: 18px;
    border-radius: 50px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
    background: #d6dddf;
    transition: all 0.5s ease-in;
  }

  /deep/  .tree-area { background-color: rgba(0, 0, 0, 0.1);
    width: 220px !important;
    /* box-shadow: 0px 0px 2px 2px #f7f6f6; */

  }

  .bg-white {
    box-shadow: 0px 0px 2px 2px #f7f6f6;
  }

  /deep/  .el-tree-node__content {
    height: 30px !important;
  }

  /deep/  .menuItem {
    box-shadow: 0px 0px 2px 2px #f7f6f6;
    height: 40px;
    line-height: 40px;
  }

  /deep/  .el-form-item {
    margin-top: 20px;
  }

  a {
    text-decoration: none;
  }

  /*正常的未被访问过的链接*/
  a:link {
    text-decoration: none;
  }

  /*已经访问过的链接*/
  a:visited {
    text-decoration: none;
  }

  /*鼠标划过(停留)的链接*/
  a:hover {
    text-decoration: none;
  }

  /* 正在点击的链接*/
  a:active {
    text-decoration: none;
  }

  /deep/  .el-dialog__body {

    overflow: hidden;

  }

  .isccheck{
    color: #6dbfff;
  }

  .isblack{
    color: black;
  }
  /deep/  .el-tree-node__label {
    /* color: white; */
    font-size: 14px;
  }

 /deep/ .el-input__inner{
    /* background-color: #1f3369; */
  }
</style>
